<div class="container">
  <h2>考试结果展示</h2>

  <div class="content">
    <div class="score-list">
      <mat-list>
        <mat-list-item
          *ngFor="let item of scoreList; index as i"
          class="item-list"
          (click)="openDetails(item.pagesId)"
        >
          <mat-card class="card">
            <p class="p-text">
              {{ i + 1 }}
              <mat-icon class="icon">label</mat-icon>
              {{ item.pageTitle }} <br />
              得分：{{ item.score }}| <mat-icon>schedule</mat-icon> 完成日期
              {{ item.time | date: 'medium' }}
            </p>
          </mat-card>
        </mat-list-item>
      </mat-list>
    </div>
    <div class="score-graph">
      <mat-card class="score-card">
        <mat-card-title>成绩曲线</mat-card-title>
        <mat-card-subtitle>
          排名曲线:越低越好 成绩曲线：越高越好
        </mat-card-subtitle>
        <mat-card-content>
          <div echarts [options]="chartOption" class="demo-chart"></div>
        </mat-card-content>
      </mat-card>
    </div>
  </div>
  
</div>
